<template>
  <div class="app-container">
    <div class="demo-input-size" style="margin-bottom: 4px;">
      <el-input
        style="width: 10%"
        placeholder="请输入手机"
        v-model="seachData.mobile">
      </el-input>
      <el-date-picker
        v-model="seachData.payTime"
        type="datetimerange"
        range-separator="至"
        start-placeholder="支付时间"
        end-placeholder="支付时间"
        value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <el-button type="primary" @click="fetchData()">查询</el-button>
    </div>
    <el-table ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="补贴码">
        <template slot-scope="scope">
          {{scope.row.coupon}}
        </template>
      </el-table-column>
      <!--<el-table-column label="坐席名称">
        <template slot-scope="scope">
          {{null}}
        </template>
      </el-table-column>-->
      <el-table-column label="客户姓名">
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="手机号">
        <template slot-scope="scope">
          <span>{{scope.row.mobile}}</span>
        </template>
      </el-table-column>
      <el-table-column label="车辆基本信息">
        <template slot-scope="scope">
          <span>{{scope.row.carName}}</span>
        </template>
      </el-table-column>
      <!--<el-table-column label="延保年期">
        <template slot-scope="scope">
          <span>{{scope.row.term}}</span>
        </template>
      </el-table-column>-->
      <el-table-column label="产品类型">
        <template slot-scope="scope">
          <span>{{scope.row.mealName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="最高赔额">
        <template slot-scope="scope">
          <span>{{getQuota(scope.row.setmealType,scope.row.quota)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="单价">
        <template slot-scope="scope">
          <span>{{scope.row.premium}}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付金额">
        <template slot-scope="scope">
          <span>{{scope.row.payMoney}}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付时间">
        <template slot-scope="scope">
          <span>{{parseTime(scope.row.payTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status==1">待支付</span>
          <span v-else-if="scope.row.status==2">已支付，待提交审核资料</span>
          <span v-else-if="scope.row.status==3">资料待审核</span>
          <span v-else-if="scope.row.status==4">审核通过，观察期</span>
          <span v-else-if="scope.row.status==5">观察期通过，生效</span>
          <span v-else-if="scope.row.status==0">失效</span>
          <span v-else-if="scope.row.status==-1">资料不通过</span>
          <span v-else-if="scope.row.status==-2">观察期不通过</span>
          <span v-else-if="scope.row.status==-21">待退款</span>
          <span v-else-if="scope.row.status==-31">待退款</span>
          <span v-else-if="scope.row.status==-41">待退款</span>
          <span v-else-if="scope.row.status==-51">待退款</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间">
        <template slot-scope="scope">
          <span >{{parseTime(scope.row.updateTime)}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 4px;">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :page-size="pageSize"
        :current-page="pageNum"
        :total="pageTotal"
        @current-change="pageChange">
      </el-pagination>
    </div>
    <!--备注弹窗-->
    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.notes" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateNotes()">确 定</el-button>
      </div>
    </el-dialog>
    <!--资料审核弹窗-->
    <el-dialog :title="dialogFormTitle" :visible.sync="authVisible">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="form.mobile" ></el-input>
        </el-form-item>
        <el-form-item label="身份证" :label-width="formLabelWidth">
          <el-input v-model="form.idCard" ></el-input>
        </el-form-item>
        <el-form-item label="email" :label-width="formLabelWidth">
          <el-input v-model="form.email" ></el-input>
        </el-form-item>
        <el-form-item label="车身前图" :label-width="formLabelWidth">
          <img style="width: 50px;height: 50px" :src="form.carFrontImg" @click="showBigImg(form.carFrontImg)">
        </el-form-item>
        <el-form-item label="车身后图" :label-width="formLabelWidth">
          <img style="width: 50px;height: 50px" :src="form.carAfterImg" @click="showBigImg(form.carAfterImg)">
        </el-form-item>
        <el-form-item label="身份证正面" :label-width="formLabelWidth">
          <img style="width: 50px;height: 50px" :src="form.cardFrontImg" @click="showBigImg(form.cardFrontImg)">
        </el-form-item>
        <el-form-item label="身份证反面" :label-width="formLabelWidth">
          <img style="width: 50px;height: 50px" :src="form.cardAfterImg" @click="showBigImg(form.cardAfterImg)">
        </el-form-item>
        <el-form-item label="里程表" :label-width="formLabelWidth">
          <img style="width: 50px;height: 50px" :src="form.mileageImg" @click="showBigImg(form.mileageImg)">
        </el-form-item>
        <el-form-item label="审核结果" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option :key="4" :value="4" :label="4">
              <span style="float: left">通过</span>
              <span style="float: right; color: #8492a6; font-size: 13px">4</span>
            </el-option>
            <el-option :key="-1" :value="-1" :label="-1">
              <span style="float: left">不通过</span>
              <span style="float: right; color: #8492a6; font-size: 13px">-1</span>
            </el-option>
          </el-select>
          <el-input v-model="form.dataRemark" placeholder="不通过时请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="authVisible = false;fetchData()">取 消</el-button>
        <el-button type="primary" @click="orderDataAuth()">确 定</el-button>
      </div>
    </el-dialog>

    <!--点击大图弹窗-->
    <el-dialog  :visible.sync="bigImgVisible">
        <img :src="bigImgUrl">
    </el-dialog>

  </div>
</template>

<script>
  import { orderApi } from '@/api/order'
  import {parseTime} from '@/utils/index'

  export default {
    data() {
      return {
        pageNum: 1, // 当前页
        pageSize: 20, // 每页数
        pageTotal: 0, // 总页数
        list: null,
        listLoading: true,
        dialogFormVisible: false,
        dialogFormTitle: '',
        formLabelWidth: '100px',
        form: {},
        codeDisabled: true,
        authVisible: false,
        bigImgVisible: false,
        bigImgUrl: '',
        seachData: {
          mobile: '',
          payTime: null
        }
      }
    },
    filters: {
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true
        const data = {
          // pageNum: this.pageNum,
          // pageSize: this.pageSize,
          mobile: this.seachData.mobile,
          payTimeDESC:'DESC',
        }
        if (this.seachData.payTime != null) {
          data.startTime = this.seachData.payTime[0]
          data.endTime = this.seachData.payTime[1]
        }
        orderApi.getList(this.pageNum, this.pageSize, data).then(response => {
          console.log(response)
          this.list = response.list
          this.listLoading = false
          this.pageTotal = response.total
          this.pageNum = response.pageNum
        })
      },
      handleEdit(index, row, type) {
        this.form = row
        if(type=='notes'){
          this.codeDisabled = true
          this.dialogFormTitle = '备注'
          this.dialogFormVisible = true
        }else if(type=='auth'){
          this.codeDisabled = true
          this.dialogFormTitle = '资料审核'
          this.authVisible = true
        }
      },
      //资料审核
      orderDataAuth(){
        console.log(this.form)
        orderApi.orderDataAuth(this.form).then(response => {
          this.authVisible = false
          this.dialogFormVisible = false
          this.fetchData()
        })
      },
      //更新备注
      updateNotes(){
        console.log(this.form)
        orderApi.updateNotes(this.form).then(response => {
          this.authVisible = false
          this.dialogFormVisible = false
          this.fetchData()
        })
      },
      // 生成合同
      getContract(index, row, type) {
        this.form = row
        orderApi.getContract(this.form.orderNo).then(response => {
          this.authVisible = false
          this.dialogFormVisible = false
        }, err => {
          console.log(err)
        })
      },
      pageChange(val) {
        this.pageNum = val
        this.fetchData()
      },
      showBigImg(url){
        this.bigImgVisible=true
        this.bigImgUrl=url
      },
      //时间格式化
      parseTime(time) {
        if(time == null) return null;
        return parseTime(time, null)
      },
      getQuota(setmealType,quota){
        if(setmealType == 1){
          return  "新车购置价" + (quota * 100) +"%"
        }else if(setmealType == 2){
          return quota +"万"
        }
      }
    }
  }
</script>
